<template>
	<view class="container">
		<scroll-view class="scroll-view_H" scroll-x="true"  :scroll-left="sc_left">
			<block  v-for="(item,index) in tabTitle" :key='index'>
				<view class="tab_item" :class="[currentTab==index ? 'select' : '']" :data-current="index" @tap="tabClick">
					{{item.name}}
				</view>
			</block>
		</scroll-view>
		<swiper :current="currentTab" @change="tabChange" class="tabswiper" :style="{height:swiperHeight}">
			<swiper-item v-for="(item, ind) in swiperList" :key="ind">
				<scroll-view scroll-y="true" class="list1">
					<noteBox :noteView="item.noteView" ></noteBox>	
				</scroll-view> 				
			</swiper-item>
		</swiper>
	</view>
</template>
 
<script>
	import noteBox from '@/components/note/index.vue'
	export default {
		components: {
			noteBox
		},
		data() {
			return {
				currentTab: 0,
				swiperHeight: '',
				tabTitle: [],
				//iStatusBarHeight:0,
				sc_left:0,
				swiperList:[]
			}
		},
		onLoad() {
			this.bolg();
			this.bolgNote();
			uni.getSystemInfo({	//获取系统信息
				success: (res) => {
					this.swiperHeight = res.windowHeight + 'px'
				},
				fail: (res) => {
					console.log('error')
				}
			});
			//this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			tabClick: function(e) { //点击tab切换
				var that = this;
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					this.currentTab = e.target.dataset.current
				}
			}, 
			 tabChange: function(e) { // 滑动页面同步tab栏
				this.currentTab = e.detail.current;
			},
			 onLoadWare: function(e) {
				 this.height = e.detail.height + 'rpx';  
			}, 
			bolg() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/bolg','GET').then(res => {
					console.log('返回bolgData数据', res)// 打印调用成功回调
					this.tabTitle = res.bolgData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			bolgNote() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/bolgArray','GET').then(res => {
					console.log('返回bolgArray数据', res)// 打印调用成功回调
					this.swiperList = res.bolgArray;
				}).catch(err => {
					console.log('请求失败')
				})
			}
		}
	}
</script>
 
<style lang='scss'>
	.scroll-view_H {
		white-space: nowrap;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #f8f9fd;
		width: 100%;
		.tab_item{
			display: inline-block;
			width: 18%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size: 30upx;
		}
		.select{
			font-size: 34upx;
			color: $uni-color-error;
			position: relative;
			&::after{
				background-color:$uni-color-error;
				width: 50%;
				height: 6upx;
				position: absolute;
				content: '';
				left: 25%;
				bottom: 0;
			}
		}
	}
	.list1{
		height: 100%;
		padding: 0 2%;
		width: 96%;
		background-color: #FFFFFF;
	}
</style>